import {
  drawerFormState,
  isExpand,
  isShowSubmitBtn,
  tableActiveKey,
} from "./store";
import FormItemComponent from "@user/popular/components/FormItemComponent";
import FooterComponent from "@user/popular/components/FooterComponent";
import { handleAction } from ".";
export const drawerInstance = ref<any>(null);
export const drawerLoading = ref(false);
export const drawerVisible = ref(false);
export const drawerTitle = ref("");
export const drawerConfig = () => {
  const defineDrawer = {
    width: "800px",
    drawerInstance,
    loading: drawerLoading,
    visible: drawerVisible,
    title: drawerTitle,
    maskClosable: true,
    formState: drawerFormState,
    slot: {
      extra_form_item: () => <FormItemComponent />,
      extra: () => {
        if (tableActiveKey.value === 0) {
          return (
            <s-button
              icon={renderIcon("icon-tubiao_tijiao")}
              type="primary"
              onClick={() => {
                drawerVisible.value = false;
                isExpand.value = false;
              }}
            >
              {$t("base.ok")}
            </s-button>
          );
        }

        if (tableActiveKey.value === 1) {
          return isShowSubmitBtn.value ? (
            <a-space size={8}>
              {withDirectivePower({
                vNode: (
                  <s-button
                    icon={renderIcon("icon-reject")}
                    loading={drawerLoading.value}
                    type="default"
                    onClick={async () => {
                      handleAction({ type: "refuse" });
                      isExpand.value = false;
                    }}
                  >
                    {$t("base.refuse")}
                  </s-button>
                ),
                bindingValue: "popularApi.refuseAudit",
              })}
              {withDirectivePower({
                vNode: (
                  <s-button
                    icon={renderIcon("icon-jushou1")}
                    loading={drawerLoading.value}
                    type="primary"
                    onClick={async () => {
                      handleAction({ type: "agree" });
                      isExpand.value = false;
                    }}
                  >
                    {$t("base.agree")}
                  </s-button>
                ),
                bindingValue: "popularApi.agreeAudit",
              })}
            </a-space>
          ) : (
            <s-button
              type="primary"
              onClick={() => {
                drawerVisible.value = false;
                isExpand.value = false;
              }}
            >
              {$t("base.ok")}
            </s-button>
          );
        }
      },
    },
  };

  watch(
    () => drawerVisible.value,
    (newValState: any) => {
      if (newValState === false) {
        isExpand.value = false;
      }
    }
  );

  return defineDrawer;
};
